<template>
  <div class="offline">
    <v-data-table
      dense
      :headers="headers"
      :items="desserts"
      item-key="name"
      class="elevation-1"
      style="width: 1000px"
      @click:row="handleclickrow"
    ></v-data-table>
    <div id="myChart" :style="{ width: '600px', height: '300px' }"></div>
  </div>
</template>
<style scoped>
.offline {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}
</style>
<script lang="ts">
export default {
  data: () => ({
    
    desserts: [],
    data: [],
    text:'',
    headers: [
      {
        text: "Dessert (100g serving)",
        align: "start",
        sortable: false,
        value: "name",
      },
      { text: "Calories", value: "calories" },
      { text: "Fat (g)", value: "fat" },
      { text: "Carbs (g)", value: "carbs" },
      { text: "Protein (g)", value: "protein" },
      { text: "Iron (%)", value: "iron" },
    ],
  }),
  mounted() {
    this.getofflinedata();
    this.drawLine();
  },
  methods: {
    getofflinedata() {
      this.$axios({
        methods: "get",
        url: "/api/home/offline",
      }).then((res) => {
        console.log(res);
        let data = res.data.desserts;
        this.desserts = data;
        console.log(this.desserts);
      });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: `${this.text}` },
        tooltip: {},
        xAxis: {
          data: ["calories", "fat", "carbs", "protein", "iron"],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: this.data,
          },
        ],
      });
    },
    handleclickrow(row) {
      let self = this;
      self.data = [];
      self.text = row.name
      
      for (const key in row) {
        if (key !== "name") {
          if(key === 'calories'){
            self.data.push(parseInt(row.calories/10))
          }else{
          if (key === "iron") {
            self.data.push(parseInt(row[key]) );
          } else {
            self.data.push(row[key]);
          }
        }
      }
      console.log(self.data);
      this.drawLine();
    }
  },
  }
}
</script>